<template>
<div class="adventure-page">
  <!-- 加载状态 -->
  <div v-if="loading" class="loading-overlay">
    <div class="loading-spinner">
      <div class="spinner"></div>
      <div class="loading-text">加载中...</div>
    </div>
  </div>

  <!-- 子Tab导航区 - 两排式设计，支持左右滑动 -->
  <div class="tab-container">
    <div class="tab-scroll-wrapper">
      <div class="tab-list">
        <!-- 第一排 -->
        <div class="tab-row">
          <div 
            v-for="(tab, index) in firstRowTabs" 
            :key="tab.id"
            class="tab-item"
            :class="{ active: activeTab === tab.id }"
            @click="switchTab(tab.id)"
          >
            <div class="tab-icon">{{ tab.icon }}</div>
            <div class="tab-text">{{ tab.name }}</div>
    </div>
    </div>
        <!-- 第二排 -->
        <div class="tab-row">
          <div 
            v-for="(tab, index) in secondRowTabs" 
            :key="tab.id"
            class="tab-item"
            :class="{ active: activeTab === tab.id }"
            @click="switchTab(tab.id)"
          >
            <div class="tab-icon">{{ tab.icon }}</div>
            <div class="tab-text">{{ tab.name }}</div>
        </div>
      </div>
      </div>
    </div>
  </div>

  <!-- 内容展示区 - 完整展示，禁止滚动 -->
  <div class="content-area">
    <!-- 主线任务 -->
    <div v-if="activeTab === 'main'" class="content-panel main-quest-panel">
      <div class="panel-header">
        <h2 class="panel-title">{{ currentMainQuest.chapterName || '主线任务' }}</h2>
        <div class="panel-progress">{{ mainQuestProgress.current }}/{{ mainQuestProgress.total }}</div>
  </div>

      <div class="quest-content">
        <div class="quest-area">
          <span class="area-label">当前区域：</span>
          <span class="area-name">{{ currentMainQuest.area || '未知' }}</span>
        </div>
        
        <div class="quest-description">
          {{ currentMainQuest.description || '江湖历练，提升武功修为' }}
        </div>
        
        <div class="quest-extra-info">
          <div class="extra-row">
            <span class="extra-label">BOSS：</span>
            <span class="extra-value">{{ currentMainQuest.boss_name || '未知' }}</span>
        </div>
          <div class="extra-row">
            <span class="extra-label">怪物类型：</span>
            <span class="extra-value">{{ currentMainQuest.enemy_type_name || currentMainQuest.enemy_type || '未知' }}</span>
      </div>
          </div>
        
          <div class="quest-rewards" v-if="currentMainQuest.rewards && currentMainQuest.rewards.length > 0">
          <div class="rewards-title">任务奖励</div>
          <div class="rewards-list">
            <div class="reward-item" v-for="(reward, index) in currentMainQuest.rewards" :key="index">
              <span class="reward-icon">{{ reward.icon || '🎁' }}</span>
              <span class="reward-text">{{ reward.name }} +{{ reward.amount }}</span>
            </div>
          </div>
        </div>
        </div>
      
      <div class="panel-action">
        <button class="challenge-btn" @click="enterMainQuest" :disabled="loading">进入任务</button>
        <button class="secondary-btn" @click="viewMainQuestList" :disabled="loading">查看列表</button>
      </div>
      </div>

    <!-- 历练区 -->
    <div v-if="activeTab === 'internal'" class="content-panel internal-quest-panel">
      <div class="panel-header">
    </div>

      <!-- 特殊怪物提示 -->
      <div v-if="specialEnemies.length > 0" class="special-enemies-info">
        <div class="info-title">稀有怪物</div>
        <div class="special-enemies-list">
          <div v-for="(enemy, index) in specialEnemies" :key="index" class="special-enemy-item">
            <span class="enemy-name">{{ enemy.name }}</span>
            <span class="enemy-multiplier">×{{ enemy.reward_multiplier }}奖励</span>
        </div>
        </div>
        </div>
      
      <!-- 历练区列表（只显示当前等级和下一个等级） -->
      <div class="fight-zone-list" v-if="availableZones.length > 0">
        <div 
          v-for="zone in availableZones" 
          :key="zone.zone_id"
          class="fight-zone-card"
          :class="{ 
            'has-special': hasSpecialEnemy(zone)
          }"
          @click="enterFightZone(zone)"
        >
          <div class="zone-header">
            <div class="zone-name">{{ zone.name }}</div>
            <div class="zone-level-badge" :class="getZoneLevelClass(zone)">
              {{ getLevelRangeText(zone.level_range) }}
      </div>
            </div>
          
          <div class="zone-desc">{{ zone.desc }}</div>
          
          <div class="zone-enemies">
            <div class="enemies-label">怪物：</div>
            <div class="enemies-list">
              <span 
                v-for="(enemy, index) in zone.enemies" 
                :key="index"
                class="enemy-tag"
                :class="{ 'special-enemy': isSpecialEnemy(enemy) }"
              >
                {{ enemy }}
              </span>
          </div>
        </div>
          
          <div class="zone-footer">
            <div class="enter-btn">进入历练</div>
        </div>
      </div>
      </div>
      
      <div v-else-if="loadingFightZone" class="loading-text">加载中...</div>
      <div v-else class="empty-text">暂无历练区数据</div>
    </div>

    <!-- 修炼内功 -->
    <div v-if="activeTab === 'pk'" class="content-panel pk-quest-panel">
      <div class="panel-header">
        <h2 class="panel-title">修炼内功</h2>
        <div class="panel-progress">待开放</div>
        </div>
      <div class="panel-desc">修炼内功心法，提升内力修为</div>
      <div class="panel-action">
        <button class="challenge-btn" disabled>敬请期待</button>
        </div>
        </div>

    <!-- 江湖副本 -->
    <div v-if="activeTab === 'dungeon'" class="content-panel dungeon-panel">
      <div class="panel-header">
        <h2 class="panel-title">江湖副本</h2>
        <div class="panel-progress">待开放</div>
      </div>
      <div class="panel-desc">探索江湖中的各种副本，获得丰厚奖励</div>
      <div class="panel-action">
        <button class="challenge-btn" disabled>敬请期待</button>
            </div>
          </div>

    <!-- 其他玩法 -->
    <div v-if="activeTab === 'other1'" class="content-panel other-panel">
      <div class="panel-header">
        <h2 class="panel-title">琅嬛福地</h2>
        <div class="panel-progress">待开放</div>
        </div>
      <div class="panel-desc">探索琅嬛福地，寻找武学秘籍</div>
      <div class="panel-action">
        <button class="challenge-btn" disabled>敬请期待</button>
        </div>
      </div>

    <!-- 光明顶 -->
    <div v-if="activeTab === 'other2'" class="content-panel guangming-peak-panel">
      <div class="panel-header">
        <h2 class="panel-title">光明顶</h2>
        <div class="panel-progress" v-if="guangmingPeakInfo">
          当前层数: {{ guangmingPeakInfo.current_floor }}/{{ guangmingPeakInfo.max_floor }}
      </div>
    </div>
      
      <div v-if="loadingGuangmingPeak" class="loading-text">加载中...</div>
      
      <div v-else-if="guangmingPeakInfo" class="peak-content">
        <!-- 入口提示 -->
        <div v-if="!guangmingPeakInfo.can_enter" class="entry-warning">
          <div class="warning-icon">⚠️</div>
          <div class="warning-text">需要等级 {{ guangmingPeakInfo.min_level }} 才能进入光明顶</div>
  </div>

        <!-- 光明顶信息 -->
        <div v-else class="peak-info">
          <!-- 当前进度 -->
          <div class="peak-progress">
            <div class="progress-item">
              <span class="progress-label">当前层数:</span>
              <span class="progress-value">{{ guangmingPeakInfo.current_floor }}</span>
            </div>
            <div class="progress-item">
              <span class="progress-label">最高层数:</span>
              <span class="progress-value highlight">{{ guangmingPeakInfo.best_floor }}</span>
            </div>
            <div class="progress-item">
              <span class="progress-label">基础奖励层:</span>
              <span class="progress-value">{{ guangmingPeakInfo.base_reward_floor }}</span>
            </div>
          </div>
          
          <!-- 怪物列表 -->
          <div class="monsters-section">
            <div class="section-title">可能遇到的对手</div>
            <div class="monsters-list">
              <div 
                v-for="(monster, index) in guangmingPeakInfo.monsters" 
                :key="index"
                class="monster-item"
              >
                {{ monster }}
      </div>
                </div>
                </div>
          
          <!-- 挑战区域 -->
          <div class="challenge-section">
            <div class="section-title">选择挑战层数</div>
            <div class="floor-selector">
              <div class="floor-info">
                <span>可挑战范围: {{ minChallengeFloor }} - {{ maxChallengeFloor }}</span>
              </div>
              <div class="floor-input-group">
                <button 
                  class="floor-btn" 
                  @click="adjustFloor(-1)"
                  :disabled="selectedFloor <= minChallengeFloor"
                >
                  -1
                </button>
                <input 
                  type="number" 
                  v-model.number="selectedFloor"
                  :min="minChallengeFloor"
                  :max="maxChallengeFloor"
                  class="floor-input"
                />
                <button 
                  class="floor-btn" 
                  @click="adjustFloor(1)"
                  :disabled="selectedFloor >= maxChallengeFloor"
                >
                  +1
                </button>
              </div>
              <button 
                class="challenge-btn-primary" 
                @click="challengeFloor"
                :disabled="challenging"
              >
                {{ challenging ? '挑战中...' : '开始挑战' }}
                </button>
              </div>
            </div>
          </div>
        </div>
      
      <div v-else class="empty-text">暂无光明顶数据</div>
      </div>

    <div v-if="activeTab === 'other3'" class="content-panel other-panel">
      <div class="panel-header">
        <h2 class="panel-title">华山论剑</h2>
        <div class="panel-progress">待开放</div>
      </div>
      <div class="panel-desc">参加华山论剑，与天下英雄竞技</div>
      <div class="panel-action">
        <button class="challenge-btn" disabled>敬请期待</button>
    </div>
  </div>

    <!-- 算命先生 -->
    <div v-if="activeTab === 'fortune'" class="content-panel fortune-teller-panel">
      <div class="panel-header">
        <h2 class="panel-title">🔮 算命先生</h2>
        <div class="panel-progress" v-if="fortuneTellerInfo">
          {{ fortuneTellerInfo.used_count }}/{{ fortuneTellerInfo.daily_limit }}
        </div>
      </div>
      
      <div v-if="loadingFortuneTeller" class="loading-text">加载中...</div>
      
      <div v-else-if="fortuneTellerInfo" class="fortune-content">
        <!-- 当前事件 -->
        <div v-if="fortuneTellerInfo.current_event" class="current-event-section">
          <div class="section-title">当前生效的事件</div>
          <div class="event-card active">
            <div class="event-header">
              <div class="event-name">{{ fortuneTellerInfo.current_event.name }}</div>
              <div class="event-time">
                {{ formatRemainingTime(fortuneTellerInfo.current_event.remaining) }}
              </div>
            </div>
            <div class="event-desc">{{ fortuneTellerInfo.current_event.desc }}</div>
          </div>
        </div>
        
        <!-- 算命信息 -->
        <div class="fortune-info-section">
          <div class="info-row">
            <span class="info-label">今日剩余次数：</span>
            <span class="info-value highlight">{{ fortuneTellerInfo.remaining_count }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">下次算命费用：</span>
            <span class="info-value gold">{{ fortuneTellerInfo.next_cost }}金元宝</span>
          </div>
        </div>
        
        <!-- 操作按钮 -->
        <div class="fortune-actions">
          <button 
            class="fortune-btn primary" 
            @click="doFortune"
            :disabled="loadingFortuneTeller || fortuneTellerInfo.remaining_count <= 0"
          >
            {{ loadingFortuneTeller ? '算命中...' : `花费${fortuneTellerInfo.next_cost}金元宝算命` }}
          </button>
          
          <button 
            v-if="fortuneTellerInfo.can_reset"
            class="fortune-btn secondary" 
            @click="doReset"
            :disabled="loadingFortuneTeller || fortuneTellerInfo.remaining_count <= 0"
          >
            {{ loadingFortuneTeller ? '重置中...' : `花费${fortuneTellerInfo.next_cost}金元宝重置` }}
          </button>
        </div>
      </div>
      
      <div v-else class="empty-state">
        <div class="empty-text">暂无数据</div>
      </div>
    </div>

    <!-- 神兵谷 -->
    <div v-if="activeTab === 'weapon_valley'" class="content-panel weapon-valley-panel">
      <div class="panel-header">
        <h2 class="panel-title">🗡️ 神兵谷</h2>
        <div class="panel-progress" v-if="weaponValleyInfo">
          {{ formatRemainingTime(weaponValleyInfo.remaining_time) }}
        </div>
      </div>
      
      <div v-if="loadingWeaponValley" class="loading-text">加载中...</div>
      
      <div v-else-if="weaponValleyInfo" class="weapon-valley-content">
        <!-- 神兵谷描述 -->
        <div class="valley-desc">
          <div class="desc-title">传说中藏有无数神兵利器的神秘山谷，击败守护者即可获得珍贵装备</div>
        </div>
        
        <!-- 当前敌人 -->
        <div v-if="weaponValleyInfo.current_enemy" class="enemy-section">
          <div class="section-title">当前守护者</div>
          <div class="enemy-card">
            <div class="enemy-header">
              <div class="enemy-name">{{ weaponValleyInfo.current_enemy.name }}</div>
              <div class="enemy-difficulty">
                <span class="difficulty-label">难度：</span>
                <span class="difficulty-value">{{ weaponValleyInfo.current_enemy.difficulty }}/10</span>
              </div>
            </div>
            <div class="enemy-desc">{{ weaponValleyInfo.current_enemy.desc }}</div>
            <div class="enemy-info">
              <div class="info-item">
                <span class="info-label">等级范围：</span>
                <span class="info-value">{{ weaponValleyInfo.current_enemy.level_range }}</span>
              </div>
            </div>
            <div class="enemy-timer">
              <span class="timer-label">刷新倒计时：</span>
              <span class="timer-value">{{ formatRemainingTime(weaponValleyInfo.remaining_time) }}</span>
            </div>
          </div>
          
          <!-- 挑战按钮 -->
          <div class="challenge-action">
            <button 
              class="challenge-btn-primary" 
              @click="challengeWeaponValleyEnemy"
              :disabled="loadingWeaponValley || weaponValleyInfo.remaining_time <= 0"
            >
              {{ loadingWeaponValley ? '挑战中...' : '挑战守护者' }}
            </button>
          </div>
        </div>
        
        <!-- 无敌人状态 -->
        <div v-else class="no-enemy-state">
          <div class="empty-text">等待敌人刷新中...</div>
          <button 
            class="refresh-btn" 
            @click="loadWeaponValleyInfo"
            :disabled="loadingWeaponValley"
          >
            {{ loadingWeaponValley ? '刷新中...' : '刷新' }}
          </button>
        </div>
      </div>
      
      <div v-else class="empty-state">
        <div class="empty-text">暂无数据</div>
      </div>
    </div>

    <!-- 昆仑山 -->
    <div v-if="activeTab === 'kunlun'" class="content-panel kunlun-panel">
      <div class="panel-header">
        <h2 class="panel-title">昆仑山</h2>
        <div class="panel-progress">待开放</div>
      </div>
      <div class="panel-desc">攀登昆仑山，挑战更强大的敌人，寻求更高境界</div>
      <div class="panel-action">
        <button class="challenge-btn" disabled>敬请期待</button>
      </div>
    </div>
  </div>

  <CustomTabBar/>
</div>
</template>

<script>
import CustomTabBar from '../../src/components/CustomTabBar.vue';

export default {
  name: 'AdventurePage',
  components: {
    CustomTabBar
  },
  data() {
    return {
      // 当前激活的Tab
      activeTab: 'main',
      
      // Tab配置
      allTabs: [
        { id: 'main', name: '主线任务', icon: '📖', row: 1 },
        { id: 'internal', name: '历练区', icon: '⚔️', row: 1 },
        { id: 'pk', name: '修炼内功', icon: '🔥', row: 1 },
        { id: 'dungeon', name: '江湖副本', icon: '🗡️', row: 1 },
        { id: 'weapon_valley', name: '神兵谷', icon: '🗡️', row: 1 },
        { id: 'other1', name: '琅嬛福地', icon: '📚', row: 2 },
        { id: 'other2', name: '光明顶', icon: '🏔️', row: 2 },
        { id: 'other3', name: '华山论剑', icon: '⚔️', row: 2 },
        { id: 'fortune', name: '算命先生', icon: '🔮', row: 2 },
        { id: 'kunlun', name: '昆仑山', icon: '⛰️', row: 2 }
      ],
      
      // 主线任务数据
      mainQuestProgress: {
        current: 3,
        total: 10
      },
      currentMainQuest: {
        name: '江湖历练',
        chapterName: '江湖历练',
        area: "大理城门",
        description: "在大理城门，与各路侠客交流经验，提升自己的武功修为",
        boss_name: '城门守卫',
        enemy_type_name: '人类',
        rewards: [
          { type: 'exp', name: '经验值', amount: 1200, icon: '⚡' },
          { type: 'equipment', name: '精铁剑', amount: 1, icon: '⚔️' }
        ]
      },
      mainChallengeCount: 40,
      
      // 内功任务数据
      internalQuestProgress: {
        current: 1,
        total: 168
      },
      internalChallengeCount: 30,
      
      // PK任务数据
      pkQuestProgress: {
        current: 1,
        total: 56
      },
      pkChallengeCount: 20,
      
      // 加载状态
      loading: false,
      loadingFightZone: false,
      loadingGuangmingPeak: false,
      
      // 历练区数据
      fightZoneList: [],
      specialEnemies: [],
      
      // 光明顶数据
      guangmingPeakInfo: null,
      selectedFloor: 35, // 默认选择的层数
      challenging: false, // 是否正在挑战
      
      // 算命先生数据
      loadingFortuneTeller: false,
      fortuneTellerInfo: null,
      
      // 神兵谷数据
      loadingWeaponValley: false,
      weaponValleyInfo: null,
      refreshTimer: null, // 倒计时定时器
      
      // 游戏参数
      gameParams: {
        roleId: null,
        chapterId: 1,
        currentLevel: 1
      },

      // 玩家等级（用于判断解锁状态）
      playerLevel: 1
    }
  },
  
  computed: {
    firstRowTabs() {
      return this.allTabs.filter(tab => tab.row === 1)
    },
    secondRowTabs() {
      return this.allTabs.filter(tab => tab.row === 2)
    },
    
    // 可用的历练区（当前等级和下一个等级）
    availableZones() {
      if (!this.fightZoneList || this.fightZoneList.length === 0) return []
      
      // 按最小等级排序
      const sortedZones = [...this.fightZoneList].sort((a, b) => {
        const minA = this.getMinLevel(a.level_range)
        const minB = this.getMinLevel(b.level_range)
        return minA - minB
      })
      
      // 找到当前等级对应的历练区（玩家等级可以进入的最高等级历练区）
      let currentLevelZone = null
      for (let i = sortedZones.length - 1; i >= 0; i--) {
        const zone = sortedZones[i]
        const minLevel = this.getMinLevel(zone.level_range)
        if (this.playerLevel >= minLevel) {
          currentLevelZone = zone
          break
        }
      }
      
      // 如果找不到，使用第一个（玩家等级过低）
      if (!currentLevelZone) {
        currentLevelZone = sortedZones[0]
      }
      
      // 找到下一个等级的历练区
      const currentMinLevel = this.getMinLevel(currentLevelZone.level_range)
      const nextZone = sortedZones.find(zone => {
        const minLevel = this.getMinLevel(zone.level_range)
        return minLevel > currentMinLevel
      })
      
      const result = [currentLevelZone]
      if (nextZone && nextZone !== currentLevelZone) {
        result.push(nextZone)
      }
      
      return result
    },
    
    // 最小可挑战层数
    minChallengeFloor() {
      if (!this.guangmingPeakInfo || !this.guangmingPeakInfo.can_enter) return 35
      return Math.max(
        this.guangmingPeakInfo.current_floor,
        this.guangmingPeakInfo.best_floor + 1
      )
    },
    
    // 最大可挑战层数
    maxChallengeFloor() {
      if (!this.guangmingPeakInfo || !this.guangmingPeakInfo.can_enter) return 35
      // 可以挑战到最高层数（150层），允许继续突破
      return this.guangmingPeakInfo.max_floor
    }
  },
  
  methods: {
    // Tab切换
    switchTab(tabId) {
      if (this.activeTab === tabId) return
      this.activeTab = tabId
      
      // 保存当前激活的tab到localStorage
      this.saveActiveTab(tabId)
      
      // 切换到历练区时加载数据
      if (tabId === 'internal' && this.fightZoneList.length === 0) {
        this.loadFightZoneData()
      }
      
      // 切换到光明顶时加载数据
      if (tabId === 'other2' && !this.guangmingPeakInfo) {
        this.loadGuangmingPeakInfo()
      }
      
      // 切换到算命先生时加载数据
      if (tabId === 'fortune' && !this.fortuneTellerInfo) {
        this.loadFortuneTellerInfo()
      }
      
      // 切换到神兵谷时加载数据
      if (tabId === 'weapon_valley' && !this.weaponValleyInfo) {
        this.loadWeaponValleyInfo()
      }
      
      // 切换tab后滚动到当前激活的tab
      this.$nextTick(() => {
        this.scrollToActiveTab()
      })
    },
    
    // 滚动到当前激活的tab
    scrollToActiveTab() {
      this.$nextTick(() => {
        const wrapper = this.$el?.querySelector('.tab-scroll-wrapper')
        const activeItem = this.$el?.querySelector('.tab-item.active')
        if (wrapper && activeItem) {
          const wrapperRect = wrapper.getBoundingClientRect()
          const itemRect = activeItem.getBoundingClientRect()
          const scrollLeft = wrapper.scrollLeft
          
          if (itemRect.left < wrapperRect.left) {
            // 向左滚动
            wrapper.scrollTo({
              left: scrollLeft - (wrapperRect.left - itemRect.left) - 20,
              behavior: 'smooth'
            })
          } else if (itemRect.right > wrapperRect.right) {
            // 向右滚动
            wrapper.scrollTo({
              left: scrollLeft + (itemRect.right - wrapperRect.right) + 20,
              behavior: 'smooth'
            })
          }
        }
      })
    },
    
    // 保存激活的tab
    saveActiveTab(tabId) {
      const storageKey = 'adventure_active_tab'
      if (typeof uni !== 'undefined' && uni.setStorageSync) {
        uni.setStorageSync(storageKey, tabId)
      } else if (typeof localStorage !== 'undefined') {
        localStorage.setItem(storageKey, tabId)
      }
    },
    
    // 读取保存的tab
    loadActiveTab() {
      const storageKey = 'adventure_active_tab'
      let savedTab = 'main' // 默认值
      
      if (typeof uni !== 'undefined' && uni.getStorageSync) {
        savedTab = uni.getStorageSync(storageKey) || 'main'
      } else if (typeof localStorage !== 'undefined') {
        savedTab = localStorage.getItem(storageKey) || 'main'
      }
      
      // 验证tab是否有效
      const validTabs = this.allTabs.map(tab => tab.id)
      if (validTabs.includes(savedTab)) {
        return savedTab
      }
      return 'main'
    },
    
    // 主线任务方法
    enterMainQuest() {
              const battleType = 'pve'
              const nextLevel = Number(this.mainQuestProgress.current || 0) + 1
              const fallback = `monster_${Math.max(1, nextLevel)}`
              const targetId = this.currentMainQuest?.boss_id || this.currentMainQuest?.enemy_id || this.currentMainQuest?.level_id || this.currentMainQuest?.area_id || this.currentMainQuest?.area_key || this.currentMainQuest?.boss_name || fallback
              const url = `/pages/battle/index?battleType=${encodeURIComponent(battleType)}&targetId=${encodeURIComponent(targetId)}`
              if (typeof uni !== 'undefined' && uni.navigateTo) {
                uni.navigateTo({ url })
              } else {
                window.location.hash = url
              }
    },
    
    viewMainQuestList() {
      if (typeof uni !== 'undefined' && uni.navigateTo) {
        uni.navigateTo({ url: '/pages/adventure/mainlist' })
      } else {
        window.location.hash = '/pages/adventure/mainlist'
      }
    },
    
    // 内功任务方法
    enterInternalQuest() {
      console.log('进入内功修炼')
      uni.showToast({ title: '功能开发中', icon: 'none' })
    },
    
    // PK任务方法
    enterPkQuest() {
      console.log('开始华山论剑')
      uni.showToast({ title: '功能开发中', icon: 'none' })
    },
    
    // 数据加载
    async loadUserInfo() {
      const roleId = (typeof uni !== 'undefined' ? uni.getStorageSync('role_id') : localStorage.getItem('role_id'))
      if (roleId) {
        this.gameParams.roleId = roleId
      }
    },
    
    async loadQuestData() {
      if (this.loading) return
      
      this.loading = true
      
      try {
        const api = (await import('@/api')).default
        const response = await api.adventure.getAdventureInfo()
        
        if (response && response.code === 1 && response.data) {
          const data = response.data
          
          // 更新主线任务信息
          if (data.main_quest) {
            const mq = data.main_quest
            this.currentMainQuest = {
              name: (mq.chapter_name && mq.area) ? (mq.chapter_name + ' · ' + mq.area) : (mq.name || '江湖历练'),
              chapterName: mq.chapter_name || '江湖历练',
              area: mq.area || '未知',
              description: mq.area_desc || mq.description || '',
              boss_name: mq.boss_name,
              enemy_type_name: mq.enemy_type_name || mq.monster_type_name || mq.enemy_type,
              enemy_type: mq.enemy_type,
              rewards: Array.isArray(mq.rewards) ? mq.rewards.map(r => ({
                type: r.reward_type || r.type,
                name: r.item_name || r.name,
                amount: r.quantity || r.amount,
                icon: r.icon || '🎁'
              })) : []
            }
            this.mainQuestProgress = {
              current: mq.cur_level || mq.progress?.current || 0,
              total: mq.total_level || mq.progress?.total || 0
            }
          }
          
          // 更新内功任务信息
          if (data.internal_quest) {
            const internalQuest = data.internal_quest
            this.internalQuestProgress = {
              current: internalQuest.progress?.current || 1,
              total: internalQuest.progress?.total || 168
            }
          }
          
          // 更新PK任务信息
          if (data.pk_quest) {
            const pkQuest = data.pk_quest
            this.pkQuestProgress = {
              current: pkQuest.progress?.current || 1,
              total: pkQuest.progress?.total || 56
            }
          }
        }
      } catch (error) {
        console.error('加载游历数据失败:', error)
      } finally {
        this.loading = false
      }
    },
    
    // 加载历练区数据
    async loadFightZoneData() {
      if (this.loadingFightZone) return
      
      this.loadingFightZone = true
      
      try {
        // 获取玩家等级
        const userStore = this.$store.getters['user/level']
        this.playerLevel = userStore || 1
        
        const api = (await import('@/api')).default
        const response = await api.adventure.getFightZoneList()
        
        if (response && response.code === 1 && response.data) {
          const data = response.data
          this.fightZoneList = Array.isArray(data.list) ? data.list : []
          this.specialEnemies = Array.isArray(data.special_enemies) ? data.special_enemies : []
        }
      } catch (error) {
        console.error('加载历练区数据失败:', error)
        uni.showToast && uni.showToast({ title: '加载失败', icon: 'none' })
      } finally {
        this.loadingFightZone = false
      }
    },
    
    // 判断区域是否解锁
    isZoneUnlocked(zone) {
      const minLevel = this.getMinLevel(zone.level_range)
      return this.playerLevel >= minLevel
    },
    
    // 获取等级范围的最小值
    getMinLevel(levelRange) {
      if (!levelRange) return 999
      const parts = levelRange.split('-')
      return parseInt(parts[0]) || 999
    },
    
    // 获取等级范围文本
    getLevelRangeText(levelRange) {
      if (!levelRange) return ''
      const parts = levelRange.split('-')
      if (parts.length === 2) {
        return `Lv.${parts[0]}-${parts[1]}`
      }
      return levelRange
    },
    
    // 获取等级徽章样式类
    getZoneLevelClass(zone) {
      const minLevel = this.getMinLevel(zone.level_range)
      if (minLevel <= 10) return 'level-low'
      if (minLevel <= 30) return 'level-mid'
      if (minLevel <= 50) return 'level-high'
      return 'level-expert'
    },
    
    // 判断是否为特殊怪物
    isSpecialEnemy(enemyName) {
      return this.specialEnemies.some(se => se.name === enemyName)
    },
    
    // 判断区域是否有特殊怪物
    hasSpecialEnemy(zone) {
      if (!zone.enemies || !Array.isArray(zone.enemies)) return false
      return zone.enemies.some(enemy => this.isSpecialEnemy(enemy))
    },
    
    // 进入历练区战斗
    enterFightZone(zone) {
      // 跳转到战斗页面，传递历练区信息
      const battleType = 'fight_zone'
      const zoneId = zone.zone_id
      const url = `/pages/battle/index?battleType=${encodeURIComponent(battleType)}&zoneId=${encodeURIComponent(zoneId)}&zoneName=${encodeURIComponent(zone.name)}`
      
      if (typeof uni !== 'undefined' && uni.navigateTo) {
        uni.navigateTo({ url })
      } else {
        window.location.hash = url
      }
    },
    
    // 加载光明顶信息
    async loadGuangmingPeakInfo() {
      if (this.loadingGuangmingPeak) return
      
      this.loadingGuangmingPeak = true
      
      try {
        const api = (await import('@/api')).default
        const response = await api.adventure.getGuangmingPeakInfo()
        
        if (response && response.code === 1 && response.data) {
          this.guangmingPeakInfo = response.data
          // 初始化选择的层数为当前可挑战层数
          if (this.guangmingPeakInfo.can_enter) {
            const currentFloor = this.guangmingPeakInfo.current_floor
            const bestFloor = this.guangmingPeakInfo.best_floor
            // 可以选择当前层数或最高层数+1
            this.selectedFloor = Math.max(currentFloor, bestFloor + 1)
          }
        }
      } catch (error) {
        console.error('加载光明顶信息失败:', error)
        if (typeof uni !== 'undefined' && uni.showToast) {
          uni.showToast({ title: '加载失败', icon: 'none' })
        }
      } finally {
        this.loadingGuangmingPeak = false
      }
    },
    
    // 调整选择的层数
    adjustFloor(delta) {
      const newFloor = this.selectedFloor + delta
      if (newFloor >= this.minChallengeFloor && newFloor <= this.maxChallengeFloor) {
        this.selectedFloor = newFloor
      }
    },
    
    // 挑战层数
    async challengeFloor() {
      if (this.challenging || !this.guangmingPeakInfo || !this.guangmingPeakInfo.can_enter) {
        return
      }
      
      // 验证层数范围
      if (this.selectedFloor < this.minChallengeFloor || this.selectedFloor > this.maxChallengeFloor) {
        if (typeof uni !== 'undefined' && uni.showToast) {
          uni.showToast({ title: '层数超出可挑战范围', icon: 'none' })
        }
        return
      }
      
      this.challenging = true
      
      try {
        const api = (await import('@/api')).default
        const response = await api.adventure.challengeGuangmingPeak(this.selectedFloor)
        
        if (response && response.code === 1 && response.data) {
          const battleData = response.data
          
          // 跳转到战斗页面
          const battleType = 'guangming_peak'
          const url = `/pages/battle/index?battleType=${encodeURIComponent(battleType)}&floor=${encodeURIComponent(this.selectedFloor)}&battleId=${encodeURIComponent(battleData.battle_id)}&monsterName=${encodeURIComponent(battleData.monster_name)}`
          
          if (typeof uni !== 'undefined' && uni.navigateTo) {
            uni.navigateTo({ url })
          } else {
            window.location.hash = url
          }
        } else {
          if (typeof uni !== 'undefined' && uni.showToast) {
            uni.showToast({ title: response?.msg || '挑战失败', icon: 'none' })
          }
        }
      } catch (error) {
        console.error('挑战光明顶失败:', error)
        if (typeof uni !== 'undefined' && uni.showToast) {
          uni.showToast({ title: '挑战失败', icon: 'none' })
        }
      } finally {
        this.challenging = false
      }
    },
    
    // 加载算命先生信息
    async loadFortuneTellerInfo() {
      if (this.loadingFortuneTeller) return
      
      this.loadingFortuneTeller = true
      
      try {
        const api = (await import('@/api')).default
        const response = await api.adventure.getFortuneTellerInfo()
        
        if (response && response.code === 1 && response.data) {
          this.fortuneTellerInfo = response.data
        }
      } catch (error) {
        console.error('加载算命先生信息失败:', error)
        if (typeof uni !== 'undefined' && uni.showToast) {
          uni.showToast({ title: '加载失败', icon: 'none' })
        }
      } finally {
        this.loadingFortuneTeller = false
      }
    },
    
    // 算命
    async doFortune() {
      if (this.loadingFortuneTeller || !this.fortuneTellerInfo) return
      
      if (this.fortuneTellerInfo.remaining_count <= 0) {
        if (typeof uni !== 'undefined' && uni.showToast) {
          uni.showToast({ title: '今日算命次数已达上限', icon: 'none' })
        }
        return
      }
      
      this.loadingFortuneTeller = true
      
      try {
        const api = (await import('@/api')).default
        const response = await api.adventure.fortuneTellerFortune()
        
        if (response && response.code === 1 && response.data) {
          this.fortuneTellerInfo = {
            ...this.fortuneTellerInfo,
            used_count: response.data.used_count,
            remaining_count: response.data.remaining_count,
            current_event: response.data.event,
            next_cost: response.data.cost
          }
          
          // 更新全局金元宝数量
          if (response.data.coin2_remaining !== undefined) {
            const itemsStore = this.$store.state.items
            if (itemsStore && itemsStore.currencies) {
              this.$store.commit('items/SET_CURRENCY', { type: 'coin2', value: response.data.coin2_remaining })
            }
          }
          
          if (typeof uni !== 'undefined' && uni.showToast) {
            uni.showToast({ title: `获得：${response.data.event.name}`, icon: 'success' })
          }
        } else {
          if (typeof uni !== 'undefined' && uni.showToast) {
            uni.showToast({ title: response?.msg || '算命失败', icon: 'none' })
          }
        }
      } catch (error) {
        console.error('算命失败:', error)
        if (typeof uni !== 'undefined' && uni.showToast) {
          uni.showToast({ title: '算命失败', icon: 'none' })
        }
      } finally {
        this.loadingFortuneTeller = false
      }
    },
    
    // 重置算命
    async doReset() {
      if (this.loadingFortuneTeller || !this.fortuneTellerInfo) return
      
      if (!this.fortuneTellerInfo.can_reset) {
        if (typeof uni !== 'undefined' && uni.showToast) {
          uni.showToast({ title: '当前没有可重置的事件', icon: 'none' })
        }
        return
      }
      
      if (this.fortuneTellerInfo.remaining_count <= 0) {
        if (typeof uni !== 'undefined' && uni.showToast) {
          uni.showToast({ title: '今日算命次数已达上限', icon: 'none' })
        }
        return
      }
      
      // 确认对话框
      if (typeof uni !== 'undefined' && uni.showModal) {
        const res = await new Promise((resolve) => {
          uni.showModal({
            title: '确认重置',
            content: `是否花费${this.fortuneTellerInfo.next_cost}金元宝重置算命？`,
            success: (res) => resolve(res.confirm),
            fail: () => resolve(false)
          })
        })
        if (!res) return
      }
      
      this.loadingFortuneTeller = true
      
      try {
        const api = (await import('@/api')).default
        const response = await api.adventure.fortuneTellerReset()
        
        if (response && response.code === 1 && response.data) {
          this.fortuneTellerInfo = {
            ...this.fortuneTellerInfo,
            used_count: response.data.used_count,
            remaining_count: response.data.remaining_count,
            current_event: response.data.event,
            next_cost: response.data.cost,
            can_reset: response.data.remaining_count > 0
          }
          
          // 更新全局金元宝数量
          if (response.data.coin2_remaining !== undefined) {
            const itemsStore = this.$store.state.items
            if (itemsStore && itemsStore.currencies) {
              this.$store.commit('items/SET_CURRENCY', { type: 'coin2', value: response.data.coin2_remaining })
            }
          }
          
          if (typeof uni !== 'undefined' && uni.showToast) {
            uni.showToast({ title: `重置成功：${response.data.event.name}`, icon: 'success' })
          }
        } else {
          if (typeof uni !== 'undefined' && uni.showToast) {
            uni.showToast({ title: response?.msg || '重置失败', icon: 'none' })
          }
        }
      } catch (error) {
        console.error('重置算命失败:', error)
        if (typeof uni !== 'undefined' && uni.showToast) {
          uni.showToast({ title: '重置失败', icon: 'none' })
        }
      } finally {
        this.loadingFortuneTeller = false
      }
    },
    
    // 格式化剩余时间
    formatRemainingTime(seconds) {
      if (!seconds || seconds <= 0) return '已过期'
      
      const hours = Math.floor(seconds / 3600)
      const minutes = Math.floor((seconds % 3600) / 60)
      const secs = seconds % 60
      
      if (hours > 0) {
        return `${hours}小时${minutes}分钟`
      } else if (minutes > 0) {
        return `${minutes}分钟${secs}秒`
      } else {
        return `${secs}秒`
      }
    },
    
    // 加载神兵谷信息
    async loadWeaponValleyInfo() {
      if (this.loadingWeaponValley) return
      
      this.loadingWeaponValley = true
      
      try {
        const api = (await import('@/api')).default
        const response = await api.adventure.getWeaponValleyInfo()
        
        if (response && response.code === 1 && response.data) {
          this.weaponValleyInfo = response.data
          
          // 启动倒计时
          this.startWeaponValleyTimer()
        }
      } catch (error) {
        console.error('加载神兵谷信息失败:', error)
        if (typeof uni !== 'undefined' && uni.showToast) {
          uni.showToast({ title: '加载失败', icon: 'none' })
        }
      } finally {
        this.loadingWeaponValley = false
      }
    },
    
    // 启动神兵谷倒计时
    startWeaponValleyTimer() {
      // 清除之前的定时器
      if (this.refreshTimer) {
        clearInterval(this.refreshTimer)
      }
      
      // 每秒更新一次剩余时间
      this.refreshTimer = setInterval(() => {
        if (this.weaponValleyInfo && this.weaponValleyInfo.remaining_time > 0) {
          this.weaponValleyInfo.remaining_time--
          
          // 如果时间为0，重新加载
          if (this.weaponValleyInfo.remaining_time <= 0) {
            this.loadWeaponValleyInfo()
          }
        }
      }, 1000)
    },
    
    // 挑战神兵谷敌人
    async challengeWeaponValleyEnemy() {
      if (this.loadingWeaponValley || !this.weaponValleyInfo || !this.weaponValleyInfo.current_enemy) {
          return
        }
        
      this.loadingWeaponValley = true
      
      try {
        const api = (await import('@/api')).default
        const response = await api.adventure.challengeWeaponValley(this.weaponValleyInfo.current_enemy.id)
        
        if (response && response.code === 1 && response.data) {
          const battleData = response.data
          
          // 跳转到战斗页面
          const battleType = 'weapon_valley'
          const url = `/pages/battle/index?battleType=${encodeURIComponent(battleType)}&enemyId=${encodeURIComponent(battleData.enemy_id)}&battleId=${encodeURIComponent(battleData.battle_id)}&enemyName=${encodeURIComponent(battleData.enemy_name)}`
          
          if (typeof uni !== 'undefined' && uni.navigateTo) {
            uni.navigateTo({ url })
          } else {
            window.location.hash = url
          }
        } else {
          if (typeof uni !== 'undefined' && uni.showToast) {
            uni.showToast({ title: response?.msg || '挑战失败', icon: 'none' })
          }
        }
      } catch (error) {
        console.error('挑战神兵谷失败:', error)
        if (typeof uni !== 'undefined' && uni.showToast) {
          uni.showToast({ title: '挑战失败', icon: 'none' })
        }
      } finally {
        this.loadingWeaponValley = false
      }
    }
  },
  
  onLoad() {
    this.loadUserInfo()
    
    // 恢复上次激活的tab
    const savedTab = this.loadActiveTab()
    this.activeTab = savedTab
    
      // 如果是历练区tab，加载数据
      if (savedTab === 'internal') {
        this.loadFightZoneData()
      }
      
      // 如果是光明顶tab，加载数据
      if (savedTab === 'other2') {
        this.loadGuangmingPeakInfo()
      }
      
      // 如果是算命先生tab，加载数据
      if (savedTab === 'fortune') {
        this.loadFortuneTellerInfo()
      }
      
      // 如果是神兵谷tab，加载数据
      if (savedTab === 'weapon_valley') {
        this.loadWeaponValleyInfo()
      }
  },
  
  onShow() {
    // 页面显示时恢复上次激活的tab（从其他页面返回时）
    const savedTab = this.loadActiveTab()
    if (savedTab !== this.activeTab) {
      this.activeTab = savedTab
      
      // 如果是历练区tab，确保数据已加载
      if (savedTab === 'internal' && this.fightZoneList.length === 0) {
        this.loadFightZoneData()
      }
      
      // 如果是光明顶tab，确保数据已加载
      if (savedTab === 'other2' && !this.guangmingPeakInfo) {
        this.loadGuangmingPeakInfo()
      }
      
      // 如果是算命先生tab，确保数据已加载
      if (savedTab === 'fortune' && !this.fortuneTellerInfo) {
        this.loadFortuneTellerInfo()
      }
      
      // 如果是神兵谷tab，确保数据已加载
      if (savedTab === 'weapon_valley' && !this.weaponValleyInfo) {
        this.loadWeaponValleyInfo()
      }
    }
  },
  
  mounted() {
    this.loadQuestData()
  },
  
  beforeDestroy() {
    // 清除神兵谷倒计时定时器
    if (this.refreshTimer) {
      clearInterval(this.refreshTimer)
      this.refreshTimer = null
    }
  },
  
  onPullDownRefresh() {
    this.loadQuestData().then(() => {
      uni.stopPullDownRefresh()
    })
  }
}
</script>

<style scoped>
/* 页面容器 - 使用参考图片配色 */
.adventure-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #e8dcc4 0%, #d4c4a8 100%);
  padding: 0;
  position: relative;
  overflow: hidden;
}

/* 加载状态 */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.loading-spinner {
  background: white;
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #8b6f47;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 15px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  color: #4a3c2a;
  font-size: 16px;
  font-weight: 500;
}

/* Tab容器 - 两排式设计，支持横向滑动 */
.tab-container {
  position: relative;
  background: linear-gradient(180deg, #f5f0e6 0%, #e8dcc4 100%);
  border-bottom: 2px solid #8b6f47;
  padding: 8px 0; /* 减少高度 */
  box-shadow: 0 3px 8px rgba(139, 111, 71, 0.2);
}

.tab-scroll-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #8b6f47 rgba(139, 111, 71, 0.2);
}

.tab-scroll-wrapper::-webkit-scrollbar {
  height: 6px;
}

.tab-scroll-wrapper::-webkit-scrollbar-track {
  background: rgba(139, 111, 71, 0.1);
  border-radius: 3px;
}

.tab-scroll-wrapper::-webkit-scrollbar-thumb {
  background: #8b6f47;
  border-radius: 3px;
}

.tab-scroll-wrapper::-webkit-scrollbar-thumb:hover {
  background: #6b4f3b;
}

.tab-list {
  display: flex;
  flex-direction: column;
  gap: 6px; /* 减少行间距 */
  min-width: max-content;
  padding: 0 8px;
}

.tab-row {
  display: flex;
  gap: 8px; /* 减少tab间距 */
  justify-content: flex-start;
  min-width: max-content;
}

.tab-item {
  flex: 0 0 auto;
  min-width: 90px; /* 减少最小宽度 */
  padding: 8px 12px; /* 减少padding */
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid #c4a57b;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(139, 111, 71, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px; /* 减少图标和文字间距 */
}

.tab-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 111, 71, 0.25);
}

.tab-item.active {
  background: linear-gradient(135deg, #8b6f47 0%, #6b4f3b 100%);
  border-color: #4b3a2a;
  box-shadow: 0 4px 16px rgba(139, 111, 71, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.2);
}

.tab-item.active .tab-icon,
.tab-item.active .tab-text {
  color: #fff;
}

.tab-icon {
  font-size: 20px; /* 减少图标大小 */
  line-height: 1;
}

.tab-text {
  font-size: 12px; /* 减少文字大小 */
  font-weight: 600;
  color: #4a3c2a;
  white-space: nowrap;
  letter-spacing: 0.5px;
}

/* 内容展示区 - 完整展示，禁止滚动 */
.content-area {
  min-height: calc(100vh - 90px); /* 100vh - tab容器约90px */
  padding: 12px;
  padding-bottom: 70px; /* customBar高度56px + 一些间距 */
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.content-panel {
  width: 100%;
  max-width: 500px;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #8b6f47;
  border-radius: 12px;
  padding: 20px 18px;
  box-shadow: 0 6px 18px rgba(139, 111, 71, 0.3),
    inset 0 2px 6px rgba(255, 255, 255, 0.5);
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden; /* 禁止滚动 */
}

/* 历练区面板特殊样式 - 禁止滚动，内容紧凑，完整展示 */
.internal-quest-panel {
  padding: 10px 12px;
  gap: 6px;
  overflow: hidden; /* 禁止滚动 */
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* 面板头部 */
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 15px;
  border-bottom: 2px solid #d8c7a3;
}

/* 历练区面板头部特殊样式 */
.internal-quest-panel .panel-header {
  padding: 0;
  padding-bottom: 6px;
  margin-bottom: 0;
  min-height: 0;
  flex-shrink: 0;
  border-bottom: none; /* 移除边框节省空间 */
}

.panel-title {
  font-size: 20px;
  font-weight: bold;
  color: #4a3c2a;
  letter-spacing: 2px;
  margin: 0;
  font-family: "STSong", "Noto Serif SC", serif;
}

.panel-progress {
  font-size: 16px;
  font-weight: 600;
  color: #8b6f47;
  background: rgba(139, 111, 71, 0.1);
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #d8c7a3;
}

/* 面板描述 */
.panel-desc {
  font-size: 15px;
  color: #6b4f3b;
  text-align: center;
  padding: 10px 15px;
  background: rgba(139, 111, 71, 0.08);
  border-radius: 10px;
  border-left: 3px solid #8b6f47;
}

/* 面板信息 */
.panel-info {
  display: flex;
  justify-content: center;
  padding: 15px 0;
}

.info-label {
  font-size: 16px;
  font-weight: 600;
  color: #4a3c2a;
  padding: 8px 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 246, 241, 0.9) 100%);
  border-radius: 10px;
  border: 2px solid #d8c7a3;
  box-shadow: 0 2px 8px rgba(139, 111, 71, 0.15);
}

/* 面板操作 */
.panel-action {
  display: flex;
  justify-content: center;
  padding: 10px 0;
}

.challenge-btn {
  width: 180px;
  height: 50px;
  background: linear-gradient(135deg, #8b6f47 0%, #6b4f3b 100%);
  color: #fff;
  border: 3px solid #4b3a2a;
  border-radius: 12px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(75, 58, 42, 0.3),
    inset 0 2px 4px rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  letter-spacing: 2px;
  font-family: "STSong", "Noto Serif SC", serif;
}

.challenge-btn:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(75, 58, 42, 0.4);
}

.challenge-btn:active:not(:disabled) {
  transform: translateY(-1px);
}

.challenge-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #d0d0d0;
  border-color: #999;
  color: #666;
}

/* 面板统计 */
.panel-stats {
  padding-top: 15px;
  border-top: 2px solid #d8c7a3;
}

.stat-item {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: #4a3c2a;
  padding: 12px 20px;
  background: rgba(139, 111, 71, 0.08);
  border-radius: 10px;
}

.stat-label {
  font-weight: 500;
  color: #6b4f3b;
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
  color: #8b6f47;
  min-width: 50px;
  text-align: center;
}

/* 主线任务专用样式 */
.quest-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.quest-area {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  background: rgba(139, 111, 71, 0.08);
  border-radius: 8px;
  border-left: 3px solid #8b6f47;
}

.area-label {
  font-size: 14px;
  font-weight: 500;
  color: #6b4f3b;
}

.area-name {
  font-size: 16px;
  font-weight: bold;
  color: #4a3c2a;
}

.quest-description {
  font-size: 15px;
  color: #6b4f3b;
  line-height: 1.6;
  padding: 12px 15px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  border: 1px solid #d8c7a3;
}

.quest-extra-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 15px;
  background: rgba(139, 111, 71, 0.05);
  border-radius: 8px;
}

.extra-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.extra-label {
  font-size: 14px;
  font-weight: 500;
  color: #8b6f47;
  min-width: 80px;
}

.extra-value {
  font-size: 14px;
  font-weight: 600;
  color: #4a3c2a;
}

.quest-rewards {
  padding: 12px 15px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(248, 246, 241, 0.6) 100%);
  border-radius: 10px;
  border: 2px solid #d8c7a3;
}

.rewards-title {
  font-size: 15px;
  font-weight: 600;
  color: #8b6f47;
  margin-bottom: 10px;
  text-align: center;
  letter-spacing: 1px;
}

.rewards-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.reward-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(139, 111, 71, 0.1);
  border-radius: 20px;
  padding: 6px 12px;
  border: 1px solid #d8c7a3;
}

.reward-icon {
  font-size: 16px;
}

.reward-text {
  color: #6b4f3b;
  font-weight: 600;
  font-size: 13px;
}

.secondary-btn {
  flex: 1;
  height: 50px;
  background: rgba(139, 111, 71, 0.1);
  color: #6b4f3b;
  border: 2px solid #c4a57b;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 1px;
  font-family: "STSong", "Noto Serif SC", serif;
}

.secondary-btn:hover:not(:disabled) {
  background: rgba(139, 111, 71, 0.2);
  border-color: #8b6f47;
  transform: translateY(-2px);
}

.secondary-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.panel-action {
  display: flex;
  gap: 12px;
  padding: 10px 0;
}

.challenge-btn {
  flex: 1;
}

/* ========== 历练区样式 ========== */
.special-enemies-info {
  margin: 0;
  margin-bottom: 6px;
  padding: 8px 10px;
  background: rgba(255, 215, 0, 0.1);
  border: 2px solid #ffd700;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.2);
  flex-shrink: 0; /* 不收缩 */
}

.info-title {
  font-size: 12px;
  font-weight: 700;
  color: #b8860b;
  margin-bottom: 4px;
  text-align: center;
}

.special-enemies-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.special-enemy-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 4px;
}

.enemy-name {
  font-size: 11px;
  font-weight: 600;
  color: #8b6914;
}

.enemy-multiplier {
  font-size: 10px;
  color: #d4af37;
  font-weight: 700;
}

.fight-zone-list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  padding: 0;
  overflow: hidden; /* 禁止滚动 */
  flex-wrap: wrap;
  flex: 1; /* 占据剩余空间 */
  min-height: 0; /* 允许flex收缩 */
}

.fight-zone-card {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #c4a57b;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 3px 10px rgba(139, 111, 71, 0.2);
  position: relative;
  flex: 1;
  min-width: 240px;
  max-width: 350px;
  display: flex;
  flex-direction: column;
}

.fight-zone-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(139, 111, 71, 0.3);
  border-color: #8b6f47;
}

.fight-zone-card.has-special::before {
  content: '⭐';
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 18px;
  color: #ffd700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.zone-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.zone-name {
  font-size: 15px;
  font-weight: 700;
  color: #4a3c2a;
  letter-spacing: 0.5px;
}

.zone-level-badge {
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.zone-level-badge.level-low {
  background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
}

.zone-level-badge.level-mid {
  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
}

.zone-level-badge.level-high {
  background: linear-gradient(135deg, #722ed1 0%, #531dab 100%);
}

.zone-level-badge.level-expert {
  background: linear-gradient(135deg, #fa8c16 0%, #d46b08 100%);
}

.zone-desc {
  font-size: 12px;
  color: #6b4f3b;
  line-height: 1.4;
  margin-bottom: 6px;
  padding: 6px 8px;
  background: rgba(139, 111, 71, 0.06);
  border-radius: 6px;
  border-left: 2px solid #c4a57b;
}

.zone-enemies {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 6px;
  padding: 6px 8px;
  background: rgba(139, 111, 71, 0.05);
  border-radius: 6px;
}

.enemies-label {
  font-size: 11px;
  font-weight: 600;
  color: #6b4f3b;
  white-space: nowrap;
}

.enemies-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
}

.enemy-tag {
  display: inline-block;
  padding: 3px 8px;
  background: rgba(139, 111, 71, 0.15);
  border: 1px solid #c4a57b;
  border-radius: 8px;
  font-size: 11px;
  color: #6b4f3b;
  font-weight: 600;
}

.enemy-tag.special-enemy {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.3) 0%, rgba(255, 193, 7, 0.3) 100%);
  border-color: #ffd700;
  color: #b8860b;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(255, 215, 0, 0.3);
}

.zone-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 4px;
  margin-top: auto; /* 确保按钮在底部 */
  border-top: none; /* 移除边框节省空间 */
}

.lock-status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #999;
  font-size: 13px;
}

.lock-icon {
  font-size: 16px;
}

.lock-text {
  font-weight: 600;
}

.enter-btn {
  padding: 6px 16px;
  background: linear-gradient(135deg, #8b6f47 0%, #6b4f3b 100%);
  color: white;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(139, 111, 71, 0.3);
  transition: all 0.3s ease;
}

.fight-zone-card:not(.locked):hover .enter-btn {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(139, 111, 71, 0.4);
}

.loading-text,
.empty-text {
  text-align: center;
  padding: 40px 20px;
  color: #6b4f3b;
  font-size: 14px;
}

/* ========== 光明顶样式 ========== */
.guangming-peak-panel {
  padding: 12px 15px;
  gap: 10px;
}

.peak-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.entry-warning {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  background: rgba(255, 193, 7, 0.1);
  border: 2px solid #ffc107;
  border-radius: 8px;
  margin-bottom: 8px;
}

.warning-icon {
  font-size: 20px;
}

.warning-text {
  flex: 1;
  font-size: 13px;
  color: #b8860b;
  font-weight: 600;
}

.peak-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.peak-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(139, 111, 71, 0.08);
  border-radius: 8px;
  border-left: 3px solid #8b6f47;
}

.progress-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.progress-label {
  color: #6b4f3b;
  font-weight: 600;
}

.progress-value {
  color: #4a3c2a;
  font-weight: 700;
  font-size: 14px;
}

.progress-value.highlight {
  color: #d4af37;
  text-shadow: 0 1px 2px rgba(212, 175, 55, 0.3);
}

.monsters-section,
.challenge-section {
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid #d8c7a3;
  border-radius: 8px;
}

.section-title {
  font-size: 14px;
  font-weight: 700;
  color: #4a3c2a;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid #d8c7a3;
}

.monsters-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.monster-item {
  padding: 5px 10px;
  background: rgba(139, 111, 71, 0.15);
  border: 1px solid #c4a57b;
  border-radius: 6px;
  font-size: 12px;
  color: #6b4f3b;
  font-weight: 600;
}

.floor-selector {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.floor-info {
  font-size: 12px;
  color: #6b4f3b;
  text-align: center;
  padding: 6px;
  background: rgba(139, 111, 71, 0.1);
  border-radius: 6px;
}

.floor-input-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.floor-btn {
  width: 40px;
  height: 36px;
  background: linear-gradient(135deg, #8b6f47 0%, #6b4f3b 100%);
  color: white;
  border: 2px solid #4b3a2a;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}

.floor-btn:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 3px 10px rgba(139, 111, 71, 0.3);
}

.floor-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.floor-input {
  width: 80px;
  height: 36px;
  padding: 0 10px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #4a3c2a;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #c4a57b;
  border-radius: 6px;
  outline: none;
}

.floor-input:focus {
  border-color: #8b6f47;
  box-shadow: 0 0 0 3px rgba(139, 111, 71, 0.2);
}

.challenge-btn-primary {
  width: 100%;
  height: 42px;
  background: linear-gradient(135deg, #8b6f47 0%, #6b4f3b 100%);
  color: white;
  border: 3px solid #4b3a2a;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(75, 58, 42, 0.3);
  transition: all 0.3s ease;
}

.challenge-btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(75, 58, 42, 0.4);
}

.challenge-btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .adventure-page {
    padding: 0;
  }
  
  .tab-container {
    padding: 6px 0; /* 减少移动端tab高度 */
  }
  
  .tab-list {
    gap: 5px;
    padding: 0 6px;
  }
  
  .tab-row {
    gap: 6px;
  }
  
  .tab-item {
    min-width: 80px; /* 减少最小宽度 */
    padding: 6px 10px; /* 减少padding */
  }
  
  .tab-icon {
    font-size: 18px; /* 减少图标 */
  }
  
  .tab-text {
    font-size: 11px; /* 减少文字 */
  }
  
  .content-area {
    min-height: calc(100vh - 70px); /* 100vh - 移动端tab容器约70px */
    padding: 10px;
    padding-bottom: 60px; /* customBar高度50px + 间距 */
  }
  
  .content-panel {
    padding: 14px 12px;
    gap: 10px;
  }
  
  .internal-quest-panel {
    padding: 8px 10px;
    gap: 5px;
  }
  
  .panel-title {
    font-size: 18px;
  }
  
  .panel-progress {
  font-size: 14px;
  }
  
  .challenge-btn {
    width: 150px;
    height: 45px;
    font-size: 16px;
  }
  
  .fight-zone-list {
    padding: 10px 12px;
    padding-bottom: 10px; /* 底部padding由content-panel统一处理 */
    gap: 10px;
  }
  
  .fight-zone-card {
    padding: 12px;
  }
  
  .zone-name {
    font-size: 16px;
  }
  
  .zone-desc {
    font-size: 13px;
  }
  
  .special-enemies-info {
    margin: 12px 15px;
    padding: 10px 12px;
  }
}

/* ========== 算命先生样式 ========== */
.fortune-teller-panel {
  padding: 12px 15px;
  gap: 10px;
}

.fortune-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.current-event-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.event-card {
  padding: 12px 15px;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #8b6f47;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(139, 111, 71, 0.2);
}

.event-card.active {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 193, 7, 0.15) 100%);
  border-color: #ffd700;
}

.event-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.event-name {
  font-size: 16px;
  font-weight: 700;
  color: #6b4f3b;
  letter-spacing: 0.5px;
}

.event-time {
  font-size: 12px;
  color: #8b6f47;
  font-weight: 600;
  background: rgba(139, 111, 71, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
}

.event-desc {
  font-size: 13px;
  color: #6b4f3b;
  line-height: 1.5;
}

.fortune-info-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 15px;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #8b6f47;
  border-radius: 8px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-label {
  font-size: 14px;
  color: #6b4f3b;
  font-weight: 600;
}

.info-value {
  font-size: 14px;
  font-weight: 700;
}

.info-value.highlight {
  color: #8b6f47;
}

.info-value.gold {
  color: #ff9800;
}

.fortune-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fortune-btn {
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.fortune-btn.primary {
  background: linear-gradient(135deg, #8b6f47 0%, #6b4f3b 100%);
  color: white;
}

.fortune-btn.primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 111, 71, 0.4);
}

.fortune-btn.secondary {
  background: linear-gradient(135deg, #d4a574 0%, #b8860b 100%);
  color: white;
}

.fortune-btn.secondary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(184, 134, 11, 0.4);
}

.fortune-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
}

.empty-text {
  color: #6b4f3b;
  font-size: 14px;
}

/* ========== 神兵谷样式 ========== */
.weapon-valley-panel {
  padding: 12px 15px;
  gap: 10px;
}

.weapon-valley-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.valley-desc {
  padding: 12px 15px;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #8b6f47;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(139, 111, 71, 0.2);
}

.desc-title {
  font-size: 14px;
  color: #6b4f3b;
  line-height: 1.6;
  text-align: center;
  font-weight: 600;
}

.enemy-section {
  display: flex;
    flex-direction: column;
  gap: 12px;
}

.enemy-card {
  padding: 15px 18px;
  background: linear-gradient(135deg, rgba(139, 111, 71, 0.1) 0%, rgba(107, 79, 59, 0.1) 100%);
  border: 2px solid #8b6f47;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(139, 111, 71, 0.2);
}

.enemy-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.enemy-name {
  font-size: 18px;
  font-weight: 700;
  color: #8b6f47;
  letter-spacing: 0.5px;
}

.enemy-difficulty {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 152, 0, 0.15);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #ff9800;
}

.difficulty-label {
  font-size: 12px;
  color: #6b4f3b;
  font-weight: 600;
}

.difficulty-value {
  font-size: 14px;
  color: #ff9800;
  font-weight: 700;
}

.enemy-desc {
  font-size: 13px;
  color: #6b4f3b;
  line-height: 1.6;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(139, 111, 71, 0.3);
}

.enemy-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-label {
  font-size: 13px;
  color: #6b4f3b;
  font-weight: 600;
}

.info-value {
  font-size: 13px;
  color: #8b6f47;
  font-weight: 700;
}

.enemy-timer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: rgba(255, 193, 7, 0.1);
  border: 2px solid #ffc107;
  border-radius: 8px;
}

.timer-label {
  font-size: 13px;
  color: #6b4f3b;
  font-weight: 600;
}

.timer-value {
  font-size: 14px;
  color: #ff9800;
  font-weight: 700;
  font-family: 'Courier New', monospace;
}

.challenge-action {
  display: flex;
  justify-content: center;
}

.challenge-btn-primary {
  padding: 14px 30px;
  background: linear-gradient(135deg, #8b6f47 0%, #6b4f3b 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(139, 111, 71, 0.4);
}

.challenge-btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(139, 111, 71, 0.5);
}

.challenge-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.no-enemy-state {
  text-align: center;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.refresh-btn {
  padding: 10px 20px;
  background: linear-gradient(135deg, #d4a574 0%, #b8860b 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}

.refresh-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(184, 134, 11, 0.4);
}

.refresh-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>
